<template>
  <div class="my">
    <bottom active="home">
      <template #main>
        <!-- 个人信息区域 -->
        <div class="top">
          <div class="msg">
            <van-uploader  v-model="fileList" :before-read="beforeRead" multiple :max-count="1" />
            <span>用户名</span>
            <div class="read">未登录/注册</div>
            <div class="set"><img src="../../assets/myhome/setting.png" alt="" width="25px"></div>
          </div>
        </div>
        <!-- 收藏区域 -->
        <van-grid :column-num="4">
          <van-grid-item v-for="(item,index) in list" :key="index" to="/">
            <div><img :src="item.image" width="40px" /></div>
            <span class="icon_span">{{item.title}}</span>
          </van-grid-item>
        </van-grid>
        <div class="help">
          <van-cell  title="求职助手" value="更多" is-link />
          <div>

          </div>
        </div>
        <!-- 信息区域 -->
        <van-cell-group>
          <van-cell icon="star-o" title="我的收藏" is-link />
          <van-cell icon="bulb-o" title="我的发现" is-link />
          <van-cell icon="eye-o" title="隐私设置" is-link />
          <van-cell icon="send-gift-o" title="我要招聘" is-link />
          <van-cell icon="like-o" title="直直公益" is-link />
          <van-cell icon="info-o" title="意见反馈" is-link />
        </van-cell-group>
     </template>
    </bottom>
  </div>
  
</template>
<script>
import Bottom from "../../components/Bottom.vue";
export default {
  name: "Myhome",
  components: {
    Bottom,
  },
  data() {
    return {
      list: [
        { id: 0, image: require("../../assets/myhome/1.png"), title: "在线简历" },
        { id: 1, image: require("../../assets/myhome/2.png"), title: "附件简历" },
        { id: 2, image: require("../../assets/myhome/3.png"), title: "我的面试" },
        { id: 3, image: require("../../assets/myhome/4.png"), title: "职位订阅" },
      ],
      fileList: [],
    };
    
  },
};
</script>
<style lang="scss" scoped>
.msg {
  height: 150px;
  background-color: navajowhite;
}
.van-uploader{
  margin: 10px;
  margin-top: 30px;
}
.msg span {
  display: block;
  margin-top: -38px;
  margin-left: 100px;
}
.read {
  margin-left: 8px;
  margin-top: 5px;
}

.icon_span {
  font-size: 13px;
}
.set{
  position: absolute;
  top: 3%;
  left:90%;
}
.van-cell__title {
  font-size: 16px;
}
.help .van-cell__value {
  font-size: 16px;
}
.help .van-cell__title {
  font-size: 18px;
}
</style>